<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">hello vue</h2>
        <button @click="opacity = 1">透明度设置为1</button>
        <button @click="stop">点击停止变幻</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.performance = false;
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1,
        },
        methods:{
            stop(){
                //clearInterval(this.timer )
                this.$destroy();
            }
        },
        // 完成模板解析，并把初始真实DOM放入页面后调用
        mounted() {
            console.log("mounted...")
            this.timer = setInterval(()=>{
                vm.opacity -= 0.01
                if(vm.opacity <= 0) {
                    vm.opacity = 1
                }
            },16)
        },
        
        //  一般关闭定时任务，绑定事件，消息订阅等
        beforeDestroy() {
            clearInterval(this.timer)
        },
        
        
    })

    // 通过外部定时器实现
    /* setInterval(()=>{
        vm.opacity -= 0.01
        if(vm.opacity <= 0) {
            vm.opacity = 1
        }
    },16) */

</script>
</html>